<template>
	<view class="invoice-details">
		<view class="id-body" :style="{ paddingTop: `${getSystemInfo.navBarHeight}px` }">
			<navBar title="发票详情" background-color="#cf1a1b"></navBar>
			<scroll-view scroll-y :style="{
        height: `calc(100vh - ${getSystemInfo.navBarHeight}px)`
      }">
				<view class="id-header">
					<view class="id-h-content">
						<view class="image">
							<u--image v-if="details.invoiceState === 0"
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/invoice_wk.png"
								width="62rpx" height="64rpx"></u--image>
							<u--image v-if="details.invoiceState === 1"
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_mark%402x.png"
								width="62rpx" height="64rpx"></u--image>
							<u--image v-if="details.invoiceState === 2"
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/invoice_yj.png"
								width="62rpx" height="64rpx"></u--image>
							<u--image v-if="details.invoiceState === 3"
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/invoice_pass.png"
								width="62rpx" height="64rpx"></u--image>
							<u--image v-if="details.invoiceState === 4"
								:src="details.invoiceType==0?'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/invoice_fail.png':'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/invoice_bh.png'"
								width="62rpx" height="64rpx"></u--image>

							<text class="state-title" v-if="details.invoiceState === 0">未开票</text>
							<text class="state-title" v-if="details.invoiceState === 1">开票中</text>
							<text class="state-title" v-if="details.invoiceState === 2">已邮寄</text>
							<text class="state-title" v-if="details.invoiceState === 3">开票完成</text>
							<text class="state-title"
								v-if="details.invoiceState === 4">{{ details.invoiceType==0?'开票失败':'已驳回'}}</text>
						</view>
						<view class="id-tips" v-if="details.invoiceState != 4">
							<text>预计可开发票金额：¥{{ formatMoney(details.invoiceAmount) }}</text>
						</view>
						<view class="id-tips" v-else>
							<text>{{details.invoiceType==0?'失败理由':'驳回理由'}}：{{ details.invoiceType==0?details.resMessage:details.resMessage}}</text>
						</view>
						<view class="id-sub-tips" v-if="details.invoiceState != 4">
							<text v-if="details.invoiceState != 3">订单完成后，我们会为您开具发票</text>
						</view>
						<view class="id-sub-tips" v-else>
							<text>请按要求修改{{details.invoiceType==0?'电子普通发票信息':'增值税专票图片和信息'}}后，再次提交</text>
						</view>
					</view>
				</view>

				<view class="base-info" :style="{'margin-top':details.invoiceState != 4 ?'-110rpx':'-58rpx'}">
					<view class="bi-title">
						<text v-if="details.invoiceType === 0">电子普通发票</text>
						<text v-if="details.invoiceType === 1">增值税专用发票</text>
					</view>
					<u-steps v-if="details.invoiceType === 0" :current="stepState" active-color="#cf1a1b">
						<u-steps-item title="订单提交">
							<view slot="icon" :class="['step-icon', details.invoiceState >= 0 && 'active']">
								<text>1</text>
							</view>
						</u-steps-item>
						<u-steps-item title="订单完成">
							<view slot="icon" :class="['step-icon', details.invoiceState >= 1 && 'active']">
								<text>2</text>
							</view>
						</u-steps-item>
						<u-steps-item :title="details.invoiceState == 4 ? '开票失败':'开票完成'">
							<view slot="icon" :class="['step-icon', details.invoiceState >= 2&& 'active']">
								<text>{{ details.invoiceState == 4 ? '×':'3'}}</text>
							</view>
						</u-steps-item>
					</u-steps>
					<u-steps v-if="details.invoiceType === 1" :current="currentIndex"
						active-color="#cf1a1b">	
						<u-steps-item :title="item.title" v-for="(item,index) in stepItem">
							<view slot="icon" :class="['step-icon', (item.slot <= currentIndex ) && 'active']">
								<text v-if="details.invoiceState == 4&&(index==stepItem.length-1)">×</text>
								<tex v-else>{{ item.slot}}</tex>
							</view>
						</u-steps-item>
					</u-steps>
					<view class="bi-content">
						<view class="item">
							<text class="title">发票类型：</text>
							<text v-if="details.invoiceType === 0">电子普通发票</text>
							<text v-if="details.invoiceType === 1">增值税专用发票</text>
						</view>
						<view class="item">
							<text class="title">发票内容：</text>
							<text v-if="details.invoiceContent === 1">商品明细</text>
							<text v-else>--</text>
						</view>
						<view class="item">
							<text class="title">抬头类型：</text>
							<text v-if="details.titleType === 0">单位</text>
							<text v-if="details.titleType === 1">个人</text>
						</view>
						<view class="item">
							<text class="title">抬头名称：</text>
							<text>{{ details.titleName || '' }}</text>
						</view>
						<view class="item">
							<text class="title">申请时间：</text>
							<text>{{ details.applyTime || '' }}</text>
						</view>
						<view class="item" v-if="details.invoiceState === 4">
							<text class="title">驳回时间：</text>
							<text>{{ details.invoicingTime || '' }}</text>
						</view>
						<view class="item" v-if="details.invoiceState === 3">
							<text class="title">开票时间：</text>
							<text>{{ details.invoicingTime || '' }}</text>
						</view>
						<view class="item"
							v-if="details.invoiceType === 1 && (details.invoiceState === 2 || details.invoiceState === 3)">
							<text class="title">快递单号：</text>
							<view class="fast-mail" style="display: block;">
								<!-- 快递公司 -->
								<text v-if="details.expressFacilitator">{{ details.expressFacilitator }}</text>
								<!-- 单号 -->
								<view style="display: flex;align-items: center;">
									<text @click="copyFastMail">{{ details.expressNumber }}</text>
									<u--image v-if="details.expressNumber"
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/icon_copy%402x.png"
										width="36rpx" height="36rpx" @click="copyFastMail"></u--image>
								</view>
								
							</view>
						</view>
					</view>
				</view>

				<!-- 商品信息 -->
				<view class="id-box goods-box">
					<view class="box-header">商品信息</view>
					<view class="box-body">
						<view class="goods-list" v-if="details.orderItemsList && Array.isArray(details.orderItemsList)">
							<view class="goods-body">
								<scroll-view scroll-x="true" style="width: calc(115rpx * 4 + 10rpx * 3)">
									<view class="images">
										<u--image v-for="item in details.orderItemsList" :src="item.image"
											:showLoading="true" width="115rpx" height="115rpx">
										</u--image>
										<view class="name" v-if="details.orderItemsList.length === 1">
											<u--text size="28rpx" color="#333" :lines="2"
												:text="details.orderItemsList[0].goodsName">
											</u--text>
										</view>
									</view>
								</scroll-view>
								<view class="gb-right">
									<view class="money">
										<text class="money-symbol">¥</text>
										<text>{{ formatMoney(details.invoiceAmount) }}</text>
									</view>
									<text>共{{ details.orderItemsList.length }}件</text>
								</view>
							</view>
						</view>
						<u-line color="#eee" margin="30rpx 0"></u-line>
						<vew class="order">
							<view class="item">
								<text class="title">订单状态：</text>
								<text>{{ orderStateMap[details.orderState] }}</text>
							</view>
							<view class="item">
								<text class="title">订单编号：</text>
								<text>{{ details.orderNo || '' }}</text>
							</view>
							<view class="item">
								<text class="title">下单时间：</text>
								<text>{{ details.orderTime || '' }}</text>
							</view>
						</vew>
					</view>
				</view>

				<!-- 发票开具规则 -->
				<view class="id-box">
					<view class="box-header">发票开具规则</view>
					<view class="box-body">
						<text v-if="details.invoiceType === 0">订单完成后，电子发票将<text
								style="color:#CF1A1B;">48</text>小时内为您开出。</text>
						<text v-if="details.invoiceType === 1">订单完成后，纸质专票将在审核通过后3个工作日内寄出。</text>
					</view>
				</view>
				<!-- 接收方式信息 -->
				<view class="id-box goods-box" v-if="details.invoiceType != 0" style="padding-bottom: 100rpx;">
					<view class="box-header">接收方式</view>
					<view class="box-body">
						<vew class="order">
							<view class="item">
								<text class="title">收 票 人： </text>
								<text>{{  details.receiptPerson ? (details.receiptPerson).substr(0,1)+new Array(details.receiptPerson.length).join('*'):'' }}</text>
							</view>
							<view class="item">
								<text class="title">联系电话：</text>
								<text>{{ details.receiptTel ? (details.receiptTel).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2'):'' }}</text>
							</view>
							<view class="item">
								<text class="title">所在地区：</text>
								<text>{{ details.receiptProvince || '' }}{{ details.receiptCity || '' }}{{ details.receiptCounty || '' }}</text>
							</view>
							<view class="item">
								<text class="title">详细地址：</text>
								<text>{{ details.receiptAddressDetail || '' }}</text>
							</view>
						</vew>
					</view>
				</view>
				<view class="id-box goods-box" v-else style="padding-bottom: 100rpx;">
					<view class="box-header">接收方式</view>
					<view class="box-body">
						<vew class="order">
							<view class="item">
								<text class="title">电子邮箱： </text>
								<text>{{ details.email || '' }}</text>
							</view>
							<view class="item">
								<text class="title">手机号码：</text>
								<text>{{ details.phone ? (details.phone).replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2'):'' }}</text>
							</view>
						</vew>
					</view>
				</view>
			</scroll-view>
			<view class="btn" v-if="details.invoiceState === 2">
				<u-button text="确认收票" type="primary" @click="sureGet"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import navBar from '@/components/navBar.vue'
	import {
		formatMoney
	} from '@/common/utils'

	export default {
		components: {
			navBar
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		data() {
			return {
				details: {},
				invoiceId:'',
				orderId:'',
				orderStateMap: {
					'-1': '取消',
					1: '待付款',
					2: '待发货',
					3: '待收货',
					4: '待使用',
					5: '服务中',
					6: '已完成',
					7: '退单中',
					8: '退单完成',
				},
				stepItem:[],
				currentIndex:0
			}
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			stepState() {
				const state = this.details.invoiceState
				// return state < 2 ? 1 : state
				return state + 1
			}
		},
		methods: {
			async getDetails(val) {
				this.invoiceId = val.invoiceId
				this.orderId =  val.orderId
				const {
					datas
				} = await this.$request({
					url: '/order-center/invoice/desc',
					method: 'GET',
					data: {
						orderId: val.orderId,
						invoiceId: val.invoiceId,
						userId: this.getUserInfo.id
					}
				})
				if(datas.invoiceType == 1){
					if(datas.invoiceState == 0){
						this.currentIndex = 1
						this.stepItem = [
							{
								title:'订单提交',
								slot:1
							},
							{
								title:'订单完成',
								slot:2
							},
							{
								title:'已邮寄',
								slot:3
							},
							{
								title:'开票完成',
								slot:4
							},
						]
					}
					if(datas.invoiceState == 1){
						this.currentIndex = 2
						this.stepItem = [
							{
								title:'订单提交',
								slot:1
							},
							{
								title:'订单完成',
								slot:2
							},
							{
								title:'已邮寄',
								slot:3
							},
							{
								title:'开票完成',
								slot:4
							},
						]
					}
					if(datas.invoiceState == 2){
						this.currentIndex = 3
						this.stepItem = [
							{
								title:'订单提交',
								slot:1
							},
							{
								title:'订单完成',
								slot:2
							},
							{
								title:'已邮寄',
								slot:3
							},
							{
								title:'开票完成',
								slot:4
							},
						]
					}
					if(datas.invoiceState == 3){
						this.currentIndex = 4
						this.stepItem = [
							{
								title:'订单提交',
								slot:1
							},
							{
								title:'订单完成',
								slot:2
							},
							{
								title:'已邮寄',
								slot:3
							},
							{
								title:'开票完成',
								slot:4
							},
						]
					}
					if(datas.invoiceState == 4){
						this.currentIndex = 3
						this.stepItem = [
							{
								title:'订单提交',
								slot:1
							},
							{
								title:'订单完成',
								slot:2
							},
							{
								title:'已驳回',
								slot:3
							}
						]
					}
				}
				this.$set(this, 'details', datas)
			},

			// 复制快递单号
			copyFastMail() {
				uni.setClipboardData({
					data: this.details.expressNumber, // 复制的内容 
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				});
			},
			async sureGet(){
				const {
					datas
				} = await this.$request({
					url: `/order-center/invoice/sign-invoice/${this.invoiceId}/confirm`,
					method: 'post',
				})
				this.getDetails({invoiceId:this.invoiceId,orderId:this.orderId})
				uni.showToast({
					title: '请求成功',
					icon: 'success',
					mask: true
				})
			},

			formatMoney,
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('invoiceDetails', this.getDetails)
		}
	}
</script>

<style scoped lang="scss">
	.invoice-details {
		display: flex;
		flex-direction: column;
		height: 100vh;
		font-size: 28rpx;

		.id-body {

			/deep/ .uicon-home,
			/deep/ .uniui-back,
			/deep/ .a-title {
				color: #fff !important;
			}

			flex: 1;
		}

		.id-header {
			background-color: rgba(207, 26, 27, 1);
			color: #fff;
			height: 400rpx;
			// border-radius: 0 0 30rpx 30rpx;
		}

		.id-h-content {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-top: 50rpx;
			line-height: 1;

			.image {
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				gap: 20rpx;
				align-items: center;
				justify-content: center;
			}

			.state-title {
				font-size: 44rpx;
			}

			.id-tips {
				font-size: 28rpx;
				margin: 34rpx 0 0;
			}

			.id-sub-tips {
				font-size: 24rpx;
				margin: 34rpx 0 0;
				opacity: 0.85;
			}
		}

		.base-info {
			padding: 32rpx;
			margin: -110rpx 20rpx 0;
			border-radius: 12rpx;
			background-color: #fff;

			.bi-title {
				text-align: center;
				font-size: 32rpx;
			}

			.bi-content {
				margin: 45rpx 0 0;
				font-size: 28rpx;
				line-height: 1.5;
				color: rgba(0, 0, 0, 0.85);

				.item {
					padding: 10rpx;
					display: flex;
					flex-direction: row;
				}

				.title {
					color: rgba(0, 0, 0, 0.45);
					margin-right: 32rpx;
					white-space: nowrap;
				}

				.fast-mail {
					display: flex;
					flex-direction: row;
					gap: 12rpx;
					align-items: center;
					flex-wrap: wrap;
				}
			}

			/deep/ .u-steps {
				margin: 60rpx 0 0;

				.u-steps-item__content {
					margin: 24rpx 0 0 !important;
				}

				.u-text__value {
					font-size: 24rpx !important;
				}

				.u-icon__icon {
					font-size: 14px !important;
					line-height: 1 !important;
				}
			}
		}

		.id-box {
			margin: 20rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.box-header {
				height: 90rpx;
				padding: 0 32rpx;
				line-height: 90rpx;
				border-bottom: 1px solid rgba(0, 0, 0, 0.10);
				color: rgba(0, 0, 0, 0.85);
			}

			.box-body {
				padding: 32rpx;
			}
		}

		.goods-box {

			// 商品信息列表
			.goods-list {
				.goods-info {
					display: flex;
					flex-direction: row;
					gap: 25rpx;
					padding: 20rpx;
					border-top: 1px solid #eee;

					&.first {
						border: 0;
					}
				}

				.goods-body {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;

					.images {
						display: flex;
						flex-direction: row;
						gap: 10rpx;

						.name {
							display: flex;
							align-items: center;
						}
					}

					.gb-right {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.money {
						color: rgba(207, 26, 27, 1);
						font-size: 28rpx;

						.money-symbol {
							font-size: 22rpx;
						}
					}
				}

				.price-number {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.pn-price {
						color: $uni-primary;
					}
				}
			}

			.order {
				font-size: 28rpx;
				line-height: 1.5;
				color: rgba(0, 0, 0, 0.85);

				.item {
					padding: 10rpx;
				}

				.title {
					color: rgba(0, 0, 0, 0.45);
					margin-right: 32rpx;
				}
			}
		}

		.step-icon {
			width: 40rpx;
			height: 40rpx;
			text-align: center;
			border-radius: 40rpx;
			line-height: 40rpx;
			background-color: transparent;
			color: rgba(0, 0, 0, 0.40);
			border: 2rpx solid rgba(0, 0, 0, 0.40);

			&.active {
				background-color: #CF1A1B;
				color: #ffffff;
				border-color: #CF1A1B;
			}
		}
		.btn{
			position: fixed;
			bottom: 0;
			width: 100%;
			background: #fff;
		}
	}
</style>